<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('自定义下拉选项的内容及风格')}`">{{ $t('自定义下拉选项的内容及风格') }}</t>
            <li>
                <span class="d-code">option-props</span>用于配置下拉选项的键、值以及自定义<span class="s-code">dom</span>
            </li>
            <li>当前已选择：{{ value || '--' }}</li>
        </template>
        <sib-dropdown clearable v-model="value" :options="dropdownData" :option-props="optionProps"></sib-dropdown>
    </example>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const value = ref(null);
        return {
            value,
            optionProps: {
                // v-model 绑定的值对应的字段，组件内部默认为: "value"
                value: 'id',
                // 下拉选项名称展示对应的字段，组件内部默认为: "label"
                label: 'name',
                // 自定义下拉选项dom; opt: 下拉选项
                customHTML: (opt) => `<span style="color: ${['red', 'green', 'skyblue'][opt.status]};">${opt.name}</span>`,
            },
            dropdownData: [
                {
                    name: '黄金糕',
                    id: 1,
                    status: 0,
                },
                {
                    name: '双皮奶',
                    id: 2,
                    status: 2,
                },
                {
                    name: '小蛋挞',
                    id: 3,
                    status: 0,
                },
                {
                    name: '黄金狮子头',
                    id: 4,
                    status: 2,
                },
                {
                    name: '螺蛳粉',
                    id: 5,
                    status: 1,
                },
            ],
            templateString: `<template>
    <div class="example-box">
        <sib-dropdown clearable v-model="value" :options="dropdownData" :option-props="optionProps"></sib-dropdown>
    </div>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const value = ref(null);
        return {
            value,
            optionProps: {
                // v-model 绑定的值对应的字段，组件内部默认为: "value"
                value: 'id',
                // 下拉选项名称展示对应的字段，组件内部默认为: "label"
                label: 'name',
                // 自定义下拉选项dom; opt: 下拉选项
                customHTML: (opt) => \`<span style="color: \${['red', 'green', 'skyblue'][opt.status]};">\${opt.name}</span>\`,
            },
            dropdownData: [
                {
                    name: '黄金糕',
                    id: 1,
                    status: 0,
                },
                {
                    name: '双皮奶',
                    id: 2,
                    status: 2,
                },
                {
                    name: '小蛋挞',
                    id: 3,
                    status: 0,
                },
                {
                    name: '黄金狮子头',
                    id: 4,
                    status: 2,
                },
                {
                    name: '螺蛳粉',
                    id: 5,
                    status: 1,
                },
            ],
        };
    },
};
<\/script>`,
        };
    },
};
</script>
